<template>
  <div>
    <!-- 设备管理首页 -->
    <el-card>
      <div slot="header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>场图管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-row :gutter="20"
              class="topLayout">
        <el-input v-model="searchForm.search"
                  placeholder="请输入关键字搜索"
                  clearable
                  class="input-search" />
                  
        <el-button type="primary"
                   icon="el-icon-search"
                   @click="getList(true)">搜 索</el-button>
      </el-row>
    </el-card>
    <el-card class="m-t m-b">
      <!-- 操作按钮 -->
      <el-row type="flex"
              justify="start"
              class="m-b">
        <el-button type="primary"
                   icon="el-icon-circle-plus-outline"
                   v-if="userInfo.role =='ADMIN'"
                   @click="addscene">创建场图</el-button>
      </el-row>
      <el-table stripe
                :data="tableData"
                style="width: 100%"
                size="small">
        <!--<el-table-column type="selection" width="55"/>-->
        <el-table-column type="index"
                         label="编号"
                         min-width="60"
                         align="center"
                         :index="table_index"></el-table-column>
        <el-table-column prop="name"
                         label="场图名称"
                         min-width="200"
                          />
        <!--<el-table-column prop="displayName" label="场图别名" min-width="200" sortable />-->
        <el-table-column prop="type"
                         label="设备类型"
                         min-width="120" />
        <el-table-column prop="buildingType"
                         label="建筑类型"
                         min-width="120">
          <template #default="{ row }">{{ row.buildingType | buildTypeFil }}</template>
        </el-table-column>
        <el-table-column prop="description"
                         label="场图描述"
                         min-width="200"
                         show-overflow-tooltip />
        <el-table-column prop="createTime"
                         label="创建时间"
                         :formatter="dateFormat"
                         min-width="140" />
        <el-table-column prop="updateTime"
                         label="更新时间"
                         :formatter="dateFormat"
                         min-width="140" />
        <el-table-column label="操作"
                         width="284"
                         fixed="right">
          <template #default="{ row }">
            <!--updateFun(row)updateUsersFun(row)-->
            <el-tag type="success" @click="user(row)" title="用户列表">
              <i class="el-icon-user"></i>
            </el-tag>
            <el-tag type="primary" @click="detail(row)" title="场图详情">
              <i class="el-icon-monitor"></i>
            </el-tag>
            <el-tag type="primary" @click="editscene(row)" title="编辑场图">
              <i class="el-icon-edit"></i>
            </el-tag>
            <el-tag type="primary" @click="uploadImangeBtn(row)" title="上传底图">
              <i class="el-icon-picture-outline"></i>
            </el-tag>
            <el-tag type="primary" @click="viewData(row)" title="查看场图">
              <i class="el-icon-view"></i>
            </el-tag>
            <el-tag type="danger" @click="deleteField(row)" title="删除场图">
              <i class="el-icon-delete"></i>
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages-btn-box m-t">
        <el-pagination :current-page="page.current"
                       :page-size="Number(page.size)"
                       layout="prev, pager, next, jumper"
                       :total="Number(page.total)"
                       @current-change="handleCurrentChange"
                       v-if="page.total>0" />
      </div>
    </el-card>
    <edit-form :show-dialog="showDialogEdit"
               :form-data="formData"
               @changeVisibleEditscene="changeVisibleEditscene"
               @getList="getList" />
    <upload-config :show-dialog="showDialogUploadConfig"
               :form-data="formData"
               @changeVisibleEditscene="changeVisibleUploadConfig"
               @getList="getList" />
    <detail :fieldPatternId="formData.fieldPatternId"
            :showDialog="showDialogDetail"
            @changeVisible="changeVisibleDetail"
            @getList="getList" />
  </div>
</template>

<script>
import EditForm from "./components/editForm";
import UploadConfig from "./components/uploadConfig";
import detail from "./components/detail";
import { formatDate } from "@/utils/utils";
import { search,deleteField } from "@/api/sceneManage";
import store from "@/store/modules/user";

export default {
  name: "Index",
  components: {
    EditForm,
    detail,
    UploadConfig
  },
  data() {
    return {
      tableData: [],
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      formData: {},
      showDialogEdit: false,
      showDialogDetail: false,
      showDialogUploadConfig: false,
      searchForm: {
        search: ""
      },
      typeList: [{ name: "IEQ" }, { name: "PMS" }, { name: "OPT" }],
      userInfo: store.state.userInfo
    };
  },
  filters: {
    buildTypeFil(val) {
      switch (val) {
        case "HOSPITAL":
          return "医院";
        case "OFFICE":
          return "办公楼";
        default:
          break;
      }
    }
  },
  mounted() {
    if (this.$route.query.page) {
      this.page.current = Number(this.$route.query.page);
    }
    if (this.$route.query.search) {
      this.searchForm = JSON.parse(this.$route.query.search);
    }
    this.getList();
  },
  methods: {
    table_index(index) {
      return (this.page.current - 1) * this.page.size + index + 1;
    },
    dateFormat(row, column) {
      if (column.property === "createTime") {
        return formatDate(new Date(row.createTime));
      } else if (column.property === "updateTime") {
        return formatDate(new Date(row.updateTime));
      }
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.getList();
    },
    addscene() {
      // state.editType = 1;
      this.formData = {};
      this.changeVisibleEditscene(true);
    },
    getList(refresh = false) {
      if (refresh) {
        this.page.current = 1;
        this.page.total = 0;
      }
      var data = {
        ...this.searchForm,
        pageNo: this.page.current,
        pageSize: this.page.size
      };

      search(data).then(res => {
        const data = res.value;
        this.tableData = data.values;
        this.page.total = data.total;
      });
    },
    user(row) {
      this.$router.push({
        path: "/sceneManage/user/index",
        query: { fieldPatternId: row.fieldPatternId, page: this.page.current, search: JSON.stringify(this.searchForm) }
      });
    },
    detail(row) {
      this.formData = row;
      this.changeVisibleDetail(true);
    },
    editscene(row) {
      this.formData = row;
      this.changeVisibleEditscene(true);
    },
    dblhandleCurrentChange(row) {
      this.$router.push({
        path: "/sceneManage/device",
        query: {
          fieldPatternId: row.fieldPatternId,
          page: this.page.current,
          search: JSON.stringify(this.searchForm)
        }
      });
    },
    uploadImangeBtn(row) {
      this.formData = JSON.parse(JSON.stringify(row));
      this.changeVisibleUploadConfig(true);
      
    },
    viewData(row) {
        let routeUrl = this.$router.resolve({
          path: "/scenePlatformDetail",
          query: {
            fieldPatternId: row.fieldPatternId,
            name: row.name,
            logo: row.logoImageKey
          }
        });
        window.open(routeUrl.href, "_blank");
    },
    deleteField(row) {
      this.$confirm("您确定要删除此场图吗", "提示", {
        confirmButtonText: " 确 定",
        cancelButtonText: " 取 消",
        type: "warning",
        confirmButtonClass:"el-icon-check",
        cancelButtonClass:"el-icon-close btn-custom-cancel"
      }).then(() => {
        const data = {
          fieldPatternId: row.fieldPatternId
        };
        deleteField(data)
          .then((res) => {
            if (res["code"] == 200) {
              this.getList();
              this.$message.success("删除成功!");
            } else {
              this.$message(res["msg"]);
            }
          })
      });
    },
    changeVisibleEditscene(e) {
      this.showDialogEdit = e;
    },
    changeVisibleUploadConfig(e) {
      this.showDialogUploadConfig = e;
    },
    changeVisibleDetail(e) {
      this.showDialogDetail = e;
    }
  }
};
</script>
<style >

.jsoneditor-menu{
display: none;
}
</style>
<style scoped lang="scss">
.topLayout {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.inline {
  // max-width: 300px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.input-search {
  width: 350px;
  min-width: 200px;
  margin-right: 20px;
}

.el-tag{
  margin-left: 10px;
}

.flexBox {
  display: flex;

  div {
    margin: 0 5px;
    border: 1px solid #aaa;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 5px;
    color: #aaa;
    cursor: pointer;
  }

  .selected {
    background-color: #1890ff;
    color: #fff;
  }
}
</style>
